<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,em,l
    
    
    ail=no,date=no,aItemress=no">
    <title>借款申请</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="../../css/dm-common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/app.css" />
    <link rel="stylesheet" type="text/css" href="../../css/home.css" />
    <link rel="stylesheet" type="text/css" href="../../css/default.css" />
    <link rel="stylesheet" href="../../css/ddb2common.css">
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/ddb2.css" />


</head>

<body>
    <div class="mode-bg-header">
        <header class="aui-bar aui-bar-nav dmc-header">
            <div class="aui-title"></div>
        </header>
        <div class="jksq-header">
            <div class="aui-tips jksq-tips" id="indextip">
                <div class="aui-tips-title aui-tips-title-home">
                    <img src="../../image/icon-tongzhi.png" class="aui-tips-title-home-img"></img>
                    息费抵扣功能上线啦！</div>
            </div>
            <div class="jksq-header-btn">

            </div>
            <div class="jksq-header-context">
                <div class="jksq-header-row1">
                    申请额度(元)
                    <span>6个月</span>
                </div>
                <div class="jksq-header-row2">20000元</div>
            </div>
        </div>
    </div>

    <div class="aui-range home-range">
        <div class="home-range-text">
            <input type="number" class="range-input" value="10000" onfocus="this.value=''" id="edu1"
                onchange="inputchange(this,'edu2',20000,500)">
            <div>申请额度(元)</div>
        </div>
        <div class="home-range-input">
            <i class="range-start">500元</i>
            <input type="range" value="10000" max="20000" min="500" class="aui-range-primary" id="edu2"
                style="background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: 50% 100%;"
                oninput="rangechange(this,'edu1',20000,0)">
            <i class="range-end">20000元</i>
        </div>
    </div>

    <div class="aui-range home-range">
        <div class="home-range-text">
            <input type="number" class="range-input" value="6" onfocus="this.value=''" id="m1"
                onchange="inputchange(this,'m11',12,1)">
            <div>申请期限(月）</div>
        </div>
        <div class="home-range-input">
            <i class="range-start">1月</i>
            <input type="range" value="6" max="12" min="1" class="aui-range-primary" id="m11"
                style="background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: 50% 100%;"
                oninput="rangechange(this,'m1',12,0)">
            <i class="range-end">12月</i>
        </div>
    </div>
    <div class="dm2-btn">
        立即申请
    </div>

</body>
<script>
    function rangechange(el, input, end, start) {
        let dom = document.getElementById(input);
        dom.value = el.value;
        el.style.cssText =
            "background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: " +
            ((el.value - start) / (end - start)) * 100 + "% 100%;"
    }

    function inputchange(el, input, end, start) {

        let dom = document.getElementById(input);
        if (el.value > end || el.value < start) {
            el.value = "";
            return;
        }
        dom.value = el.value;
        dom.style.cssText =
            "background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: " +
            ((el.value - start) / (end - start)) * 100 + "% 100%;"
    }

    setInterval(function () {
        let lst = document.getElementById("indextip").classList;
        if (lst.contains('dmc-tips-display')) {
            document.getElementById("indextip").classList.remove('dmc-tips-display');
            document.getElementById("indextip").classList.add('dmc-tips-display-none');
        } else {
            document.getElementById("indextip").classList.add('dmc-tips-display');
            document.getElementById("indextip").classList.remove('dmc-tips-display-none');
        }
    }, 2000)
</script>

</html>